<!--
 * @Author: zqg
 * @Date: 2021-01-06 14:39:05
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-16 09:41:11
 * @Description: 工资报表
-->
<template>
  <base-layout
    dialog-title="添加备注"
    :dialog-visible="remarkDialogVisible"
    @dialog-close="closeRemark"
    dialogWidth="60%"
  >
    <template #searchPanel>
      <search-panel
        :addPer="'111'"
        :selectPer="'111'"
        :excelPer="'admin'"
        :financePer="'111'"
        addTitle="工资发放"
        financeTitle="工资封账"
        @insert="setWage('已发放')"
        @search="search"
        @finance="setWage('已封账')"
        @export="handleDataExport('Wage', '工资报表')"
        :showSearchButton="true"
        :showAddButton="true"
        :showExportButton="true"
        :showFinanceButton="true"
      >
        <job-shop
          v-model="searchOptions.storeId"
          placeholder="所属门店"
        />
        <role-select
          v-model="searchOptions.roleId"
          placeholder="职位"
        />
        <el-date-picker
          v-model="searchOptions.lssueDate"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="请选择薪资日期"
        ></el-date-picker>
        <el-input
          v-model="searchOptions.user"
          clearable
          placeholder="员工姓名/联系方式"
          style="width: 200px"
        />
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{row}">
          <i
            class="el-icon-edit"
            title="详情工资"
            style="cursor: pointer;"
            @click="detail(row)"
          ></i>
          <i
            class="el-icon-document"
            title="员工备注"
            style="color:red; margin-left: 20px;cursor: pointer"
            @click="setRemark(row)"
          ></i>
        </template>
      </data-table>
    </template>
    <template #dialog>
      <el-form
        :model="remarkConfig"
        ref="remarkFrom"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label-width="0">
          <el-row>
            <el-col :span="12">
              <el-form-item label="备注人:">
                <el-input
                  :value="currentManagerUser.name"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注时间:">
                <el-date-picker
                  v-model="remarkConfig.remarkTime"
                  type="date"
                  disabled
                  value-format="yyyy-MM-dd"
                  placeholder="选择备注时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label-width="0">
          <el-row>
            <el-form-item label="备注:">
              <el-input
                type="textarea"
                v-model="remarkConfig.remark"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button
          type="primary"
          @click="remarkSave"
        >保存</el-button>
      </div>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import moment from 'moment'
import {
  getWageList,
  setWage,
  addRemark,
  findRemark
} from '@/api/after-sale/personnel/wage'
export default {
  mixins: [
    baseMixin({
      findData: getWageList,
      dataName: ['content', 'totalRecords']
    })
  ],
  data() {
    return {
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text' },
        { name: '员工姓名', value: 'userName', type: 'text' },
        { name: '员工职位', value: 'userRoleName', type: 'text' },
        { name: '联系方式', value: 'phone', type: 'text' },
        { name: '薪资日期', value: 'wageDate', type: 'text' },
        { name: '基础薪资', value: 'baseSalary', type: 'text' },
        { name: '绩效', value: 'jxAmount', type: 'text' },
        { name: '考勤', value: 'kqAmount', type: 'text' },
        { name: '发放薪资', value: 'ffAmount', type: 'text' },
        { name: '发放日期', value: 'lssueDate', type: 'text' },
        { name: '状态', value: 'status', type: 'text' },
        { name: '备注', value: 'remark', type: 'text' }
      ],
      tableData: [
        {
          updateTime: '202-12-2'
        }
      ],
      // 工资报表搜索参数
      searchOptions: {
        // 门店id
        storeId: '',
        // 职位id
        roleId: '',
        lssueDate: '',
        user: ''
      },
      // 备注弹窗显示/隐藏
      remarkDialogVisible: false,
      // 备注弹窗信息
      remarkConfig: {
        id: 0,
        remarkUserId: '',
        remarkUserName: '',
        remark: '',
        remarkTime: new Date()
      }
    }
  },
  computed: {
    // 当前登录用户信息
    currentManagerUser() {
      return this.$store.state.user
    }
  },
  methods: {
    /**
     * @description: 工资封账/工资发放
     * @param {String} 状态（已发放/已封账）
     * @return {*}
     */
    setWage(status) {
      setWage({
        status: status,
        storeId: this.currentManagerUser.id,
        wageDate: moment(new Date('2021-01-03 00:00:00')).format('YYYY-MM')
      }).then(res => {
        let { success } = res
        if (success) {
          this.$message.success('设置成功')
          this.setTableData()
        }
      })
    },
    /**
     * @description: 查询
     * @param {*}
     * @return {*}
     */
    search() {
      this.setTableData()
    },
    /**
     * @description: 查看工资详情
     * @param {Object} 工资报表信息
     * @return {*}
     */
    detail(row) {
      this.$router.push({
        path: '/personnel/salaryDetail',
        query: {
          userId: row.userId,
          jxAmount: row.jxAmount || '',
          kqAmount: row.kqAmount || ''
        }
      })
    },
    /**
     * @description: 修改备注
     * @param {any} 报表信息
     * @return {*}
     */
    setRemark(row) {
      const id = row.id || 0
      this.remarkDialogVisible = true
      this.remarkConfig.id = id
      findRemark(id).then(res => {
        const { success, data } = res
        if (success && data) {
          this.$set(
            this.remarkConfig,
            'remarkUserId',
            data.remarkUserId || this.currentManagerUser.id
          )
          this.$set(
            this.remarkConfig,
            'remarkUserName',
            data.remarkUserName || this.currentManagerUser.name
          )
          this.$set(this.remarkConfig, 'remark', data.remark || '')
          this.$set(
            this.remarkConfig,
            'remarkTime',
            new Date(data.remarkTime) || ''
          )
        }
      })
    },
    /**
     * @description: 关闭备注弹窗
     * @param {*}
     * @return {*}
     */
    closeRemark() {
      this.remarkDialogVisible = false
    },
    /**
     * @description: 保存备注
     * @param {*}
     * @return {*}
     */
    remarkSave() {
      this.$refs.remarkFrom.validate(valid => {
        if (valid) {
          const remarkConfig = this.remarkConfig
          remarkConfig.remarkTime = moment(remarkConfig.remarkTime).format(
            'YYYY-MM-DD HH:mm:ss'
          )
          addRemark(remarkConfig).then(res => {
            let { success } = res
            if (success) {
              this.$message.success('保存成功')
              this.closeRemark()
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.footer {
  text-align: center;
}
</style>
